<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生、子代选择器</title>
		<style>
			/*⑥派生【后代】选择器：抓取元素，祖先元素内找所有匹配的子孙元素
			语法：祖先任意选择器   后代任意选择器{}
		
			*/
		   #header span{
			   display: block;
			   width:50%;
			   background-color: #00ffff;
			   
			   
		   }
		   /*⑦子代选择器:抓取元素，父元素内找所有匹配的子元素
		   语法：父元素 任意选择器>子元素 任意选择器{}
		   */
		  #header>span{
			  background-color: #ffaa00;
		  }
		  #header>span:hover{
			  background-color: #00ff7f;
		  }
		</style>
	</head>
	<body>
		<div id="header">
			<span>左侧导航</span>
			<span>
			<div class="header">
			<span>右侧导航区1</span>
			<span>右侧导航区2</span>
			</div>
			</span>	
		</div>
			<span>右侧导航</span>
		
		</div>
	</body>
</html>